<template>
  <div class="goods">
    <top-nav from="true" :title="borrow.borrowTitle" html="帮助"></top-nav>

    <div id="con1" class="tc">
      <p class="info-intrest">预期年化收益率（%）</p>
      <p class="info-int fcred">{{ borrow.rate }}</p>
      <ul class="clearfix info-ms">
        <li class="fl">
          <p>借款期限</p>
          <p class="fcred" id="timelimit">{{ borrow.borrowTimeLimit }}</p>
        </li>
        <li class="fl">
          <p>总金额(元)</p>
          <p class="fcred">{{ borrow.borrowSum }}</p>
        </li>
        <li class="fl">
          <p>起投金额(元)</p>
          <p class="fcred">{{ borrow.minAmount }}</p>
        </li>
      </ul>
      <div class="jd1">
        <div class="jd2" style="'width:'+borrow.tenderProgressRate+'%'"></div>
      </div>
      <div class="jdt clearfix">
        <div class="fl">
          <p>筹款进度<span class="fcred" id="rate">{{ borrow.tenderProgressRate }}%</span></p>
        </div>
        <div class="fr">
          <p>剩余金额<span class="fcred">{{ borrow.balanceMoney }}</span></p>
        </div>
      </div>
    </div>

    <div id="con2">
      <div class="con2">
        <img src="/static/img/pro_details/shrq.png" class="img1">
        <font class="fon1">还款方式：</font><font class="fon2">{{ borrow.repayType }}</font>
      </div>

      <div class="con2">
        <img src="/static/img/pro_details/shrq.png" class="img1">
        <font class="fon1">保障方式：</font><font class="fon2 red">本息保障计划</font>
      </div>

      <div class="con2">
        <img src="/static/img/pro_details/syjs.png" class="img1">
        <font class="fon1">预计收益：</font>

        <font class="fon2" id="profitSum">投资金额×{{ borrow.rate }}%÷360×{{ borrow.borrowTimeLimit }}</font>

      </div>

      <div class="con2">
        <img src="/static/img/pro_details/xqjl.png" class="img1">
        <font class="fon1">交易记录：</font>
        <img src="/static/img/pro_details/more.png" class="img2">
      </div>

      <a :href="'#/product/descript/'+borrow.borrowEid">
        <div class="con2" id="introduct">
          <img src="/static/img/pro_details/xmjs.png" class="img1">
          <font class="fon1">项目介绍：</font>
          <img src="/static/img/pro_details/more.png" class="img2">
        </div>
      </a>

    </div>

    <div id="con3">
      <h2>购买金额：</h2>
      <div id="ipt">
        <div class="ipt1" @click="minus">
          <img src="/static/img/pro_details/minus.png">
        </div>
        <div class="ipt2"><input type="number" v-model="borrow.inputAmt" placeholder="请输入投资金额">元</div>
        <div class="ipt1" style="border:0" @click="plus">
          <img src="/static/img/pro_details/add.png">
        </div>
      </div>
      <a @click="investConfirm">确认投资</a>
    </div>

    <!--红包列表弹窗-->
    <div class="popup" id="js-redpack">
      <div class="popupBg"></div>
      <div class="popupBox">
        <h2>可用红包</h2>
        <ul></ul>
        <input type="button" value="确定" class="sure" onclick="product.checkAmount()">
        <input type="button" value="取消" class="cancel" onclick="product.cancelTender()">
      </div>
    </div>

  </div>
</template>

<script>
  import { base, api, open } from '@/common/constant'
  import TopNav from '@/components/TopNav'

  export default {
    name: 'product',
    data () {
      return {
        borrow: {},
      }
    },
    mounted (){
      this.$nextTick(function () {
        this.getData()
      })
    },
    //computed: mapState(['bannerList']),
    methods: {
      getData: function () {
        console.log('产品ID', this.$route.params.pid)
        this.$store.dispatch('postSync', {
          url: api.borrow,
          params: {borrowEid: this.$route.params.pid},
          ok: open.borrow,
          fail: base.emptyList,
          that: this
        })
      },
      minus: function () {
        this.inputAmt > 0 && this.inputAmt--
      },
      plus: function () {
        this.inputAmt++
      },
      investConfirm: function () {
        this.$loading('玩命加载中...')
        this.$store.dispatch('postSync', {
          url: this.$store.state.apiUrls.tender,
          ok: 'getIndexData',
          fail: 'setEmpty',
          that: this
        })
        setTimeout(function () {
          this.$loading.close()
        }, 100)
      }
    },
    components: {
      TopNav
    }
  }
</script>
